<template>
    <div>
        <h1>{{ name }}</h1>
        <h1>{{ age }}</h1>
        <button @click="changeName">修改名称</button>
        <button @click="showAge">展示名称</button>
        <h1>{{ a }}</h1>
        <h1>{{ b }}</h1>
        <button @click="changeData">修改data数据</button>
        <button @click="getSetup">获取setup数据</button>
    </div>
</template>


<script lang="ts">
export default {
    name: 'PersonInfo',
    data(){
        return{
            a:20,
            b:30
        }
    },
    methods:{
        // 可以访问到setup中数据，但是不能反过来
        changeData(){
            this.a=99
        },
        getSetup(){
            alert(this.name)
            console.log('print------>name',this.name)
        }
    },
    setup() {
        // 可以定义数据，此时的数据并不是响应式的
        let name = "小吳"
        let age = 20

        function changeName() {
            name = "小李"
            console.log('print------>name', name)
        }

        function showAge() {
            alert(age)
            console.log('print------>age', age)
        }

        return { name, age, changeName, showAge }
    }
}

</script>


<style scoped>
/* @import url(); 引入公共css类 */
</style>
